<!-- 大小 -->
<template>
    <layout-pane label="大小">
        <template v-if="['suspension'].includes(widgetType)">
            <si-input-number
                v-model="widget.widgetData.eles.customFeature.width"
                :min="0"
                label="宽度"
                unit="px"
            />
            <si-input-number
                v-model="widget.widgetData.eles.customFeature.height"
                :min="0"
                label="高度"
                unit="px"
            />
        </template>
        
        <template v-else-if="['announce'].includes(widgetType)">
            <si-input-number
                v-model="widget.widgetData.eles.customFeature.width"
                :min="0"
                label="宽度"
            />
            <si-input-number
                v-model="widget.widgetData.eles.customFeature.height"
                :min="0"
                label="高度"
            />
        </template>

        <template v-else-if="['title-ele'].includes(widgetType)">
            <si-input-number
                v-model="widget.widgetData.eles.style.width"
                :min="0"
                label="宽度"
                unit="px"
            />
            <si-input-number
                v-model="widget.widgetData.eles.style['line-height']"
                :min="0"
                label="高度"
                unit="px"
            />
        </template>

        <template v-else-if="['breakline'].includes(widgetType)">
            <si-input-number
                v-model="widget.widgetData.eles.style.width"
                :min="0"
                label="宽度"
                unit="px"
            />
            <si-input-number
                v-model="widget.widgetData.eles.style['border-width']"
                :min="0"
                label="高度"
                unit="px"
            />
        </template>

        <template v-else>
            <si-input-number
                v-model="widget.widgetData.eles.style.width"
                :min="0"
                label="宽度"
                unit="px"
            />
            <si-input-number
                v-model="height"
                :min="0"
                label="高度"
                unit="px"
            />
        </template>
    </layout-pane>
</template>

<script>
import { defineComponent, toRefs, computed } from 'vue'
import LayoutPane from '@/components/setting-pane/layout-pane'
import { SiInputNumber } from '@/components/setting-pane/setting-item'
export default defineComponent({
    name: 'RowSize',
    components: {
        LayoutPane,
        SiInputNumber
    },
    props: {
        widget: {
            type: Object,
            default: () => ({})
        }
    },
    setup(props) {
        const { widget } = toRefs(props)

        const widgetType = computed(() => widget.value?.widgetData?.eles?.type)

        const height = computed({
            get: () => widget.value.widgetData.eles.style.height,
            set: val => {
                widget.value.widgetData.eles.style.height = val
                if (['button'].includes(widgetType.value)) {
                    widget.value.widgetData.eles.style['line-height'] = val
                }
            }
        })

        return {
            widget,
            widgetType,
            height
        }
    }
})
</script>